<template>
	<!--html-->
	<!--需要一个根容器-->
	<div id="index">
		<!--最大的容器-->
		<div class="header">
			<div class="mel_left">
				<i class="iconfont icon-fenlei" id="show_hidden"></i>
			</div>
			<div class="mel_center">{{header_title}}</div>
			<div class="mel_right">
				<i class="iconfont icon-iconfuzhi"></i>
			</div>
		</div>
		<!--路由-->
		<div class="the_sidebar" id="sidebar_x" style="display:none">
			<ul>
				<li v-for="m in menu" @click="Location(m)"><span>{{m.name}}</span><i class="iconfont icon-xiangyou"></i></li>		
			</ul>
		</div>
		<router-view></router-view>

		<div class="foother">
			121
		</div>
	</div>

</template>

<script>
	//js
	//引入axios插件
	import axios from "axios";
	
	//watched属性：代码更易于理解，它指定监测的值是谁，然后相应的改变其他的值。
	export default {
		computed: {
			//计算机属性，根据数据依赖变化而变化，并且数据使用缓存的形式
			header_title: function() {
				return this.$store.state.title;
			}
		},
		methods: {
			Location: function(p) {
				//通过$router.push方法,传路径
				//和localtion的用法一致，
				this.$router.push({
					path: p.path, //跳转路径
					query: {
						id: 4057 //传参
					}
				});
				console.log(p)
				//改变title的状态   $store.commit(自定义事件，传参)
				this.$store.commit("toggleTitle", p.name)
			}
		},
		//methods里面定义的函数，是方法，只要调用它，函数就会执行
		mounted: function() {
			//保存this的指向保证是当前的vue对象
			var self = this;
			//当index被引入的时候渲染时开始发起请求
			//axios是异步请求，在它外面且在下面的代码不会等待它完成，会直接开始运行，
			//而异步请求体里面的内容会在其请求成功或者失败才执行相应的代码。
			axios({//axios前端使用 axios 发送请求
				url: "https://m.maizuo.com/v4/api/film/now-playing",//请求接口
				methods: "get",//请求方式
				data: {
					count: 10,
					page: 1,
				},
			}).then(function(res) {//第一个then是将返回值json化
				//成功回调
				console.log(res);
				self.film = res.data.data.films;
				self.Pages = res.data.data.page;

			}).then(function(err) {//第二个then是通过返回值完成具体业务
				//失败回调
				console.warn(err);
			});
		},
		//data中对应数据发生改变时，计算属性的值也会发生改变
		data: function() {
			return {
				loading:false,
				film: [],
				Pages: {},
				menu: [{
						name: "首页",
						path: "/",
					},
					{
						name: "影片",
						path: "/film",
					},
					{
						name: "影院",
						path: "/cinema",
					},
					{
						name: "商城",
						path: "/shop",
					},
					{
						name: "我的",
						path: "/min",
					},
					{
						name: "卖座",
						path: "/maiz",
					},
				]
			}
		}
	};

	//控制侧边栏显示和隐藏
	function Show_Hidden(obj) {
		if(obj.style.display == "block") {
			obj.style.display = 'none';
		} else {
			obj.style.display = 'block';
		}
	}
	window.onload = function() {
		var olink = document.getElementById("show_hidden");
		var odiv = document.getElementById("sidebar_x");
		olink.onclick = function() {
			Show_Hidden(odiv);
			return false;
		}
	};
</script>
<style lang="scss">
	@import "../scss/header.scss";
	/*也可以直接在这里编写scss*/
</style>